<!doctype html>
<html class="no-js" lang="de">
  <head>
    <meta charset="utf-8">
    <title>Hungry Student</title>
    <link rel="icon" href="css/img/Favicon_HungryStudent_Logo.ico"/>
    <!-- css from bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">

    <!-- js, jquery, popper from bootstrap -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="wrapper">
      <div id="sidebar" class="closed"> 
        
        <!-- title -->
        <div class="sidebar-header">
          <h3 class="font-weight-bold mt-3 mr-1 float-left">Hungry Student</h3>
          <img class="icon" src="css/img/IconTab_100x100px_HungryStudent.ico" alt="HungryStudentIconTab"> 
        </div>
        
        <hr class="style1">
        
        <!-- Dropdown -->
        <div class="form-inline">
          <label for="standardSchool" class="mr-2">Schule</label>
          <select class="form-control" id="standardSchool">
            <option>ZHAW Zürich</option>
            <option>ZHAW Winterthur</option>
            <option>Andere Schulen</option>
          </select>
        </div>
        
        <hr class="style1">
        
        <h4>Filter</h4>
        
        <!-- Checkboxes -->
        <div class="mb-2">
          <div class="custom-control custom-checkbox mb-2">
            <input id="vegetarisch" class="checkbox float-left" type="checkbox" value="">
            <label class="float-right h6" for="vegetarisch">Vegetarisch</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input id="takeAway" class="checkbox float-left" type="checkbox" value="">
            <label class="float-right h6" for="takeAway">Take Away</label>
          </div>
        </div>
        
        <!-- Range slider -->
        <div class="range-slider text-center">
          <input class="w-75 m-auto" type="range" value="1" min="0" max="2" step="1">
          <div class="container mb-3">
            <div class="row">
              <div class="col"> Billig </div>
              <div class="col"> Mittel </div>
              <div class="col"> Teuer </div>
            </div>
          </div>
        </div>
        
        <!-- Toggle buttons -->
        <div class="container mb-3">
          <div class="row mb-1">
            <div class="col">
              <button class="btn btn-light btn-sm w-100 border border-dark">Asiatische Küche</button>
            </div>
            <div class="col">
              <button class="btn btn-light btn-sm w-100 border border-dark">Fast Food</button>
            </div>
          </div>
          <div class="row mb-1">
            <div class="col">
              <button class="btn btn-light btn-sm w-100 border border-dark">Cafés</button>
            </div>
            <div class="col">
              <button class="btn btn-light btn-sm w-100 border border-dark">Europäische Küche</button>
            </div>
          </div>
          <div class="row mb-1">
            <div class="col">
              <button class="btn btn-light btn-sm w-100 border border-dark">Schweizerische Küche</button>
            </div>
            <div class="col">
              <button class="btn btn-light btn-sm w-100 border border-dark">Bars</button>
            </div>
          </div>
        </div>
        
        <!-- Buttons -->
        <div class="list-group">
          <a href="pages/favoriten.html" class="list-group-item list-group-item-action list-group-item-warning font-weight-bold text-dark"> Gespeicherte Markierungen </a> 
          <a href="pages/markierungen.html" class="list-group-item list-group-item-action list-group-item-danger font-weight-bold text-dark"> Erstellte Markierungen </a> 
        </div>
        <hr class="style1">
        
        <!-- <a href="pages/about.html" class="float-right">About</a> -->
        
        <div class="float-right"> 
          <!-- About button -->
          <button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#aboutModalBox" >About Us</button>
        </div>
      </div>
      
      <!-- Modal About-->
      <div class="modal fade bd-example-modal-lg" id="aboutModalBox" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalCenterTitle">About Us</h4>
		 <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p><!-- Team presentation --> 
                Unser spannendes Team besteht aus vier Informatik Studenten der ZHAW - Zürcher Hochschule für Angewandte Wissenschaften: Erwin Tran (tranerw1), Gabriele Pace (pacegab1), Aleksandra Timofeeva (timofale) und Semanur Cerkez (cerkesem). <br>
                <br>
                <!-- Scope of this software product --> 
                Ziel des Softwareproduktes Hungry Student ist es Studenten in Zürich ihrer Hochschule nahegelegene Essensmöglichkeiten, welche Studentenrabatt anbieten, in Form einer interaktiven Karte zu präsentieren. Unterschiedliche Funktionen, so etwa eine Suchleiste mit Filterkriterien oder die Möglichkeit Favoriten zu speichern, ermöglichen dem Benutzer eine einfache und effiziente Handhabung der Webseite. Weiterhin erlaubt das benutzerfreundliche Design eine effektive und zeitsparende Nutzung. <br>
                <br>
                <!-- Product presentation --> 
                Das Projekt Hungry Student ist in Form einer Web-Applikation für die private Nutzung gedacht. Zur Zielgruppe gehören Studenten und junge Erwachsene aus den Universitäten und Hochschulen der Stadt Zürich.
                
                Die Sitzplätze der Hochschulen sind meistens sehr begrenzt und oft zur Mittagszeit überlastet. Mit der Applikation Hungry Student soll es möglich sein, verschiedene Essmöglichkeiten abzurufen, um einen besseren Überblick über die Angebote zu bekommen. Der Benutzer hat Zugang zu einer Liste von Restaurants, die er auch aktiv mitgestalten kann, indem er neue Einträge erstellt. 
                
                Da die Applikation nicht nur die nahe gelegenen Cafés und Restaurants, sondern auch die Information über die Studentenrabatte anzeigt, orientiert sich das Projekt in erster Linie auf Studenten, jedoch steht die Anwendung auch anderen Zielgruppen zur Verfügung. Das grundlegende Ziel des Projektes ist es, den Studenten ein Hilfsmittel zur Verfügung zu stellen, welches ihnen erlaubt, günstige Essensmöglichkeiten zu finden. 
                
                Um die Applikation zu benutzen, ist ein Laptop oder Smartphone nötig. Die Plattform spielt keine Rolle, da es sich dabei um eine Web-Applikation handelt. Im ersten Schritt wird die Anwendung für Laptops ausgelegt. Das Projekt bildet sich aus einer online Web-Applikation mit aktueller Standortangabe, deshalb muss der Benutzer über Internetzugang verfügen sowie GPS eingeschaltet haben.
				</p>
      </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Schliessen</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Page Content -->
      <div id="content">
        <div id="menuPart" class="position-fixed">
          <div class="input-group">
            <button type="button" id="menuButton" class="btn btn-sm mr-2">
              <img id="menuImage" src="css/img/menu-icon.png" alt="Menu"> 
            </button>   
            <div class="input-group-prepend">
              <span class="input-group-text">Suche</span>
            </div>
            <input id="searchBar" type="text" name="form-control">
          </div>
        </div>  
        
        <div id="loginSpace"> 
          <a href="pages/login.html">Login</a> 
          / 
          <a href="pages/registrierung.html">Registrieren</a>
        </div>

        <div id="mapButtons"> 
          <a class="btn btn-lg btn-primary" href="pages/neuemarkierung.html" role="button">
            Markierung erstellen
          </a> 
        </div>
      </div>
    </div>
  </body>
</html>
